<template lang="">
  <el-dialog title="新增员工" :visible="dialogFormVisible" @close="btnCancel">
    <el-form ref="myForm" :model="FormData" :rules="rules">
      <el-form-item prop="username" label="姓名" :label-width="formLabelWidth">
        <el-input v-model="FormData.username" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item prop="mobile" label="手机号" :label-width="formLabelWidth">
        <el-input v-model="FormData.mobile" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item prop="timeOfEntry" label="入职时间" :label-width="formLabelWidth"">
        <el-date-picker v-model=" FormData.timeOfEntry" style=" width: 100%;" type="date" placeholder="入职时间">
        </el-date-picker>
      </el-form-item>
      <el-form-item prop="formOfEmployment" label="聘用形式" :label-width="formLabelWidth">
        <el-select v-model="FormData.formOfEmployment" style=" width: 100%;" placeholder="请选择">
          <el-option v-for="item in EmployeeEnum.hireType" :key="item.id" :label="item.value" :value="item.id">

          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item prop="workNumber" label="工号" :label-width="formLabelWidth">
        <el-input v-model="FormData.workNumber" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item prop="departmentName" label="组织名称" :label-width="formLabelWidth">
        <el-input @focus="getDepartmentList" @blur="losefocus" v-model="FormData.departmentName"
          autocomplete="off"></el-input>
        <el-tree :data="treeData" default-expand-all v-if="showTree" :props="{label:'name'}"
          @node-click="handleNodeClick"></el-tree>
      </el-form-item>
      <el-form-item prop="correctionTime" label="转正时间" :label-width="formLabelWidth">
        <el-date-picker v-model="FormData.correctionTime" style=" width: 100%;" type="date" placeholder="转正时间">
        </el-date-picker>
      </el-form-item>

    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="btnCancel">取 消</el-button>
      <el-button type="primary" @click="btnConfirm">确 定</el-button>
    </div>
  </el-dialog>
</template>
<script>
  import { getDepartmentListAPI, addEmployeeAPI } from '@/api'
  import EmployeeEnum from '@/api/constant/employees.js'
  import { transTree } from '@/utils'
  export default {
    data () {
      return {
        EmployeeEnum,
        // 表单数据
        FormData: {
          username: '',	//		姓名	
          mobile: '',//			手机号	
          formOfEmployment: '',//			聘用形式	
          workNumber: '',   //			工号	
          departmentName: '',   //			组织名称	
          timeOfEntry: '',   //			入职时间	
          correctionTime: '',  //			转正时间
        },
        rules: {
          username: [{ required: true, message: '用户姓名不能为空', trigger: 'blur' },
          { min: 1, max: 4, message: '长度在 3 到 5 个字符', trigger: 'blur' }],
          mobile: [{ required: true, message: '手机号不能为空', trigger: 'blur' },
          { pattern: /1[3|5|9]\d{9}/, message: '手机号格式错误', trigger: 'blur' }],
          formOfEmployment: [{ required: true, message: '聘用形式不能为空', trigger: 'blur' }],
          workNumber: [{ required: true, message: '工号不能为空', trigger: 'blur' }],
          timeOfEntry: [{ required: true, message: '入职时间不能为空', trigger: 'blur' }],
          correctionTime: [{ required: true, message: '转正时间不能为空', trigger: 'blur' }],
          departmentName: [{ required: true, message: '组织名称不能为空', trigger: 'change' }]
        },//表单验证
        options: [],
        formLabelWidth: '120px',
        showTree: false, //是否显示树形控件
        Employment: {},
        treeData: [],
        is_click: false,
        clickDepartName: '', //树形控件点击时的数据
        defaultProps: {
          children: 'children',
          label: 'name'
        }
      }
    },
    props: {
      dialogFormVisible: {
        type: Boolean,
        default: false
      }
    },
    watch: {
      // 监听元素
      'FormData.departmentName' (newVal) {
        if (newVal !== this.clickDepartName) {
          this.FormData.departmentName = this.clickDepartName
        }
      }
    },
    methods: {
      btnCancel () {
        this.FormData = {
          username: '',	//		姓名	
          mobile: '',//			手机号	
          formOfEmployment: '',//			聘用形式	
          workNumber: '',   //			工号	
          departmentName: '',   //			组织名称	
          timeOfEntry: '',   //			入职时间	
          correctionTime: '',  //			转正时间
        }
        this.$emit('update:dialogFormVisible', false)
        this.$refs.myForm.resetFields()
      },
      // 点击确定，添加元素
      async btnConfirm () {
        try {
          // 进行表单校验
          await this.$refs.myForm.validate()
          // 进行元素添加
          await addEmployeeAPI(this.FormData)
          // 通知父组件更新数据
          this.$parent.getEmployees()
          // 关闭弹层
          this.$parent.dialogFormVisible = false
        } catch (err) {
        }
      },
      // 获取部门列表
      async getDepartmentList () {
        const { depts } = await getDepartmentListAPI()
        const res = transTree(depts, '')
        this.treeData = res
        this.showTree = true
      },
      // tree被点击时的回调
      handleNodeClick (data) {
        this.is_click = true
        if (data && data.children) {
          return
        }
        this.FormData.departmentName = data.name
        this.clickDepartName = data.name
        this.showTree = false
        this.is_click = false
      },
      asd (data) {
        console.log(data);
      },
      // 失去焦点时的回调
      losefocus () {
        setTimeout(() => {
          if (this.is_click) {
            this.is_click = false
            return
          }
          this.showTree = false
        }, 150)
      }
    },
  }
</script>
<style lang="">

</style>